<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>zhuce</title>
	
	<link rel="stylesheet" type="text/css" href="css/xin_base.css">
	<style type="text/css">
	.bodyWrap{

	width: 100%;
	height:600px;
	margin: 0 auto;
	overflow: hidden;
	zoom: 1; 
	position: relative;
	background-color: #fef5d8;
	background-size:cover;

}
	.dengluWrap{
		width:1200px;
		height:600px;
		position: relative;
		margin:0 auto;
		background-color: #FCF9E7;
	}
	.dengluBg{
		position: absolute;
		top:0;
		right: 0;
		height:600px;
		width:700px;
	}
/*·····································登录样式··································*/
.login_Qian{
    
    position:absolute;
    left: 70px;
    top:100px;
	background-color: #fff;
    z-index: 500;

    border-radius: 5px;

    padding:10px 50px 10px 50px;
    box-shadow:0 0 15px 0 rgba(170, 170, 170, 0.5);
	display:block!important;
}

.loginName,.loginWord,.yanzhengma{
	border:#E9E9E9 solid 1px;
	width: 306px;
	height: 44px;
	border-radius: 3px;
	padding-left: 5px;
	margin-bottom: 10px;
	position: relative;
}

.loginName input,.loginWord input{
	height: 42px;
	width: 244px;
	border-radius: 3px;
	outline:none;

}
.loginName label,.loginWord label,.yanzhengma label{
	font-size: 14px;
	color: #333;
	line-height: 44px;
}
.login_Qian h3{
	height: 46px;
	line-height: 46px;
	font-size: 16px;
	font-weight: bold;
	color:#cb7047;
}
.yanzhengma>img{
	position: absolute;
	height: 43px;
	width: 120px;
	right: 1px;
	top: 1px;
}
.yanzhengma>input{
	width: 125px;
	height: 43px;
	outline: none;
}
.loginRadio input{
	height: 16px;
	width: 16px;
	margin-right: 5px;
	vertical-align: middle;
}
.loginRadio{
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 10px;
}
.loginSub{
	width: 313px;
	margin-bottom: 10px;
	position: relative;

}
.loginSub input{
	height: 36px;
	width: 313px;
	border-radius: 5px;
	
	font-size: 14px;
	background-color: #cb7047;
}
.loginSub label{
	position: absolute;
	top: 9px;
	left: 142px;
	font-size: 14px;
	color: #fff;
}
.register{
	height: 30px;
}
.register a{
	color: #3498f0;
}
.register a.forget{
	float: right;
}
.hezuodenglu{
	border-top: #ccc solid 1px;
}
.dengluwangzhan ul li{
	float: left;
	height: 64px;
	width: 76px;
	position: relative;

}
.dengluwangzhan{
	margin-bottom: 30px;
}
.dengluwangzhan ul li a{
	display: inline-block;
	height: 64px;
	width: 64px;
	position: absolute;
	left: 7px;
	background-image: url(../images/hezuowangzhan.png);
	margin: 0 auto;
	background-repeat: no-repeat;
}
.dengluwangzhan ul li a h4{
	position: absolute;
	bottom: 0px;
	width: 64px;
	text-align: center;
}
.qq a{
	background-position: center -140px;
}
.xinlang a{
	background-position: center 0;
}
.tengxun a{
	background-position:center  -70px ;
}
.weixin a{
	background-position:center -280px ;
}
.loginDown{
	width: 100%;
    height: 100%;
    background: #000;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 400;
    display: none;
}



	</style>
</head>
<body>
	 <body>
	<!-- ······························头部结构····································· -->

	<div class="headerWrap">
	<!-- 顶部结构······················································ -->
		<div class="head clearfix">
			<div class="huanying">
				<p>天道酬勤，欢迎来到好琴声!</p>
			</div>
			<div class="h1">
				<a href="javascript:;">
					<h1>好琴声</h1>
				</a>
			</div>
			<div class="fanti">
				<a href="javascript:;">繁体</a>
			</div>
			<div class="erWeiMa">
				<div class="erWeiMaImg">
					<img src="images/foot_app.jpg" alt="">
				</div>
				<h2>扫一扫下载APP</h2>
			</div>
			<div class="denglu clearfix">
				<div class="dengLeft">
					<ul class="clearfix">
						<li><a href="javascript:;">个人中心</a></li>
						<li>丨</li>
						<li><a href="javascript:;">登录</a></li>
						<li>丨</li>
						<li><a href="javascript:;">注册</a></li>
					</ul>
				</div>
				<div class="dengRight">
					<a href="javascript:;">
						<img src="images/ad1.jpg" height="70" width="150" alt="">
					</a>
				</div>
			</div>
		</div>
	<!-- 顶部结构结束······················································ -->

	<!-- 导航结构···························································· -->
		<div class="navwrap">
			<div class="nav">
				<ul class="clearfix">
					<li><a href="javascript:;">音乐广场</a></li>
					<li><a href="javascript:;">音乐资讯</a></li>
					<li><a href="javascript:;">音乐名人</a></li>
					<li><a href="javascript:;">音乐老师</a></li>
					<li><a href="javascript:;">音乐教室</a></li>
					<li><a href="javascript:;">音乐乐团</a></li>
					<li><a href="javascript:;">音乐海选</a></li>
					<li><a href="javascript:;">音乐乐谱</a></li>
					<li><a href="javascript:;">音乐百科</a></li>
					<li><a href="javascript:;">音乐电台</a></li>
					<li><a href="javascript:;">声粉论坛</a></li>
					
				</ul>
			</div>
		</div>
	<!-- 导航结构···························································· -->
	</div>
<!-- 头部结构结束······························································ -->

<!-- ····························中间结构·································· -->
<div class="bodyWrap">
	<div class="dengluWrap">
		<img class="dengluBg" src="images/dengluBg.jpg"  alt="">
	
    	<!-- 登录结构 -->
		<div class="login_Qian">
			
			<h3>登录好琴声</h3>
			<form action="">
				<ul>
					<li class="loginName">
						<label for="username">用户名：</label>
						<input type="username" id="username" placeholder="请输入用户名" required>
						
					</li>
					<li class="loginWord">
						<label for="password">密　码：</label>
						<input type="password" id="password" placeholder="请输入密码" required>
						
					</li>
					<li class="yanzhengma">
						<label for="yanzheng">验证码：</label>
						<input type="text" id="yanzheng" required placeholder="请输入验证码">
						<img src="images/yanzhengma.gif"  alt="">
					</li>
					<li class="loginRadio" id="loginRadio1">
						<input type="radio" id="onlyYou">
						<label for="onlyYou">记住账号</label>
					</li>

					<li class="loginSub"><input type="submit" id="submit" value=""><label for="submit">登　录</label></li>
				</ul>
				
			</form>
			<div class="register">
				<span>没有账号?</span>
				<a href="javascript:;">立即注册</a>
				<a class="forget" href="javascript:;">忘记密码？</a>
			</div>
			
		</div>
	</div>

</div>




<!-- ····························中间结构结束·································· -->	
<!-- 底部结构开始································································ -->
	<div class="footerWrap">
		<div class="footBian">
			<div class="footNavWrap clearfix">
				<div class="footNav clearfix">
					<dl>
						<dd><a href="javascript:;">音乐广场</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐资讯</a></dd>
						<dt><a href="javascript:;">音乐新闻</a></dt>
						<dt><a href="javascript:;">音乐资讯</a></dt>
						<dt><a href="javascript:;">音乐活动</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐名人</a></dd>
						<dt><a href="javascript:;">名人名家</a></dt>
						<dt><a href="javascript:;">音乐之星</a></dt>
						
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐老师</a></dd>
						<dt><a href="javascript:;">键盘老师</a></dt>
						<dt><a href="javascript:;">吉他老师</a></dt>
						<dt><a href="javascript:;">弦乐老师</a></dt>
						<dt><a href="javascript:;">管乐老师</a></dt>
						<dt><a href="javascript:;">民乐老师</a></dt>
						<dt><a href="javascript:;">电声老师</a></dt>
						<dt><a href="javascript:;">民乐老师</a></dt>
						
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐教室</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐乐团</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐海选</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐乐谱</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐百科</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐电台</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">声粉论坛</a></dd>
						
					</dl>
				</div>
				<div class="footCode clearfix">
					<div class="firstCode">
						<a href="javascript:;">
							<img src="images/foot_weixin.jpg" alt="">
							<h3>扫一扫关注微信</h3>
						</a>
					</div>
					<div class="secondCode">
						<a href="javascript:;">
							<img src="images/foot_app (1).jpg" alt="">
							<h3>扫一扫下载APP</h3>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footBtm clearfix">
				<div class="h1">
					<a href="javascript:;">
						<h1>好琴声</h1>
					</a>
				</div>
				<div class="lianxi">
					<div class="footTil">
						<span>好琴声</span>
						<i>0 2 1 - 6 7 7 0 3 9 5 6</i>
					</div>
					<div class="footcon">
						<p>Copyright © 2015 greattone.net All rights reserved. 好琴声版权所有</p>
						<p>沪ICP备09050100号</p>
						<p>公司总部地址：上海市金山区枫泾镇枫湾路531号科创小镇二楼 24小时服务热线：15216849061</p>
					</div>
				</div>
			</div>
		</div>
	</div>

<!-- 底部结构开始································································ -->




    



</body>
</body>
</html>